<template>
  <view class="wrap">
    <scroll-view
      :scroll-top="state.scrollTop"
      scroll-y="true"
      class="scroll-Y scroll"
      @scroll="scroll"
      id="view1"
    >
      <view v-if="state.type == 'BMI'">
        <view class="header">
          <img class="img" src="https://ainengli.hzjrsw.com/jkhx/knowledgeBg.png" alt="" />
          <view class="title">关于BMI</view>
          <view class="subtitle">了解健康知识，我的健康我做主</view>
        </view>
        <view class="content">
          <view class="title">
            <text class="name">概述</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item">
            BMI是身体质量指数，又叫体质指数、体重指数，是国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。
          </text>
          <text class="content-item">
            BMI是用体重公斤数除以身高米数平方得出的数字，
            计算公式：体质指数(BMI)=体重(kg)/（身高(m)^2 ）。
          </text>
        </view>
        <view class="content">
          <view class="title">
            <text class="name">数值指标</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item">
            1.我国的诊断标准则为：BMI=18.5～23.9属正常体重；BMI=24.0～27.9属超重；BMI≥28.0为肥胖。
          </text>
          <text class="content-item">
            2.对于未成年人、运动员、正在做重量训练、孕妇或哺乳期女性、身体虚弱或久坐不动的老人，以上数值可能不适用。
          </text>
          <text class="content-item">
            3.单独采用BMI评判肥胖及其程度不能反映年龄、性别、种族、疾病等差异造成的体脂含量及分布的不同。目前普遍的观点是要真正评判是否肥胖，应结合腰围、体脂率、BMI来综合判断。
          </text>
        </view>
      </view>
      <view v-if="state.type == 'whr'">
        <view class="header">
          <img class="img" src="https://ainengli.hzjrsw.com/jkhx/knowledgeBg.png" alt="" />
          <view class="title">关于腰臀比</view>
          <view class="subtitle">了解健康知识，我的健康我做主</view>
        </view>
        <view class="content">
          <view class="title">
            <text class="name">概述</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item"> 腰臀比（WHR）=腰围/臀围 </text>
          <text class="content-item">
            1.腰围：经脐部中心的水平围长，或肋最低点与髂嵴上缘两水平线间中点线的围长，用软尺测量，在呼气之末、吸气未开始时测量。
          </text>
          <text class="content-item"> 2.臀围：臀部向后最突出部位的水平围长，用软尺测量 。 </text>
          <text class="content-item">
            腰臀比和健康有重要的关系，是诊断中心性肥胖的重要指标。WHO推荐的健康的腰臀比为男性≤0.9，女性≤0.85。
          </text>
        </view>
        <view class="content">
          <view class="title">
            <text class="name">中心性肥胖</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <view class="define"><text>·定义</text></view>
          <text class="content-item">
            中心性肥胖又称为腹型肥胖、向心性肥胖，是一种体内脂肪以心脏、腹部为中心沉积的肥胖类型。多由体内糖皮质激素分泌过多导致，常见于库欣综合征患者，某些特殊人群如
            2 型糖尿病、高血压病、骨质疏松、多囊卵巢综合征、不孕/不育和肾上腺意外瘤患者高发。
          </text>
          <view class="define"><text>·健康危害</text></view>
          <text class="content-item">
            向心性肥胖患者发生各种并发症的危险性约是全身匀称性肥胖者的 2～3
            倍，而且腰围越粗，危险性越高。常见的并发症有动脉硬化、脑卒中、高血压、冠心病、糖尿病、高脂血症、骨质疏松、代谢综合征等。
          </text>
          <view class="define"><text>·就诊指针</text></view>
          <text class="content-item">
            1.逐渐出现满月脸、水牛背（颈后部突出，背部肌肉明显凸起），腹部脂肪堆积，锁骨上窝有脂肪垫；
          </text>
          <text class="content-item">
            2.出现持续性向心性肥胖，伴视力减退、持续性头痛、闭经、阳痿等；
          </text>
          <text class="content-item"> 3.出现其他严重、持续或进展性症状体征。 </text>
          <view class="define"><text>·就诊科室</text></view>
          <text class="content-item"> 内分泌科 </text>
          <view class="define"><text>·日常生活建议</text></view>
          <text class="content-item"> 1.合理饮食 </text>
          <text class="content-item">
            鼓励摄入低能量、低脂肪、适量蛋白质和碳水化合物，补充富含微量元素和维生素的膳食，限制油腻食物和过多零食，控制盐、油、糖的摄入，避免进食油炸食物，尽量采用蒸、煮、炖的烹调方法，严格限制饮酒。
          </text>
          <text class="content-item"> 2.适当运动 </text>
          <text class="content-item">
            创造尽量多活动的机会，适当运动，运动方式根据自身情况选择，不宜过于剧烈，可以以中、低强度有氧运动为主，每周进行150~300分钟，每周5~7天，至少隔天运动1次，如走路、慢跑、游泳、打羽毛球等。抗阻运动为辅，每周2~3天，每次10~20分钟，每周通过运动消耗能量，2000kcal或以上。
          </text>
          <text class="content-item"> 3.生活习惯 </text>
          <text class="content-item">
            规律作息，不熬夜，每日保证7h左右的睡眠；每天静坐时间，尽量控制在2-4小时以内，对于长期静坐或伏案工作者，每小时要起来活动3~5分钟。
          </text>
          <text class="content-item"> 4.自我监测 </text>
          <text class="content-item">
            建立控制饮食意识，每餐7分饱为宜，不暴饮暴食，进食速度应细嚼慢咽，延长进食时间，加餐可以选择吃少量水果；做好自我监测。
          </text>
        </view>
        <view class="content">
          <view class="title">
            <text class="name">参考文献</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item">
            [1]Tchernof A, Despres JP. Pathophysiology of human visceral obesity: an
            update[J].Physiol Ｒev.2013.93(1):359-404.
          </text>
          <text class="content-item">
            [2]Paley CA, Johnson MI. Abdominal obesity and metabolic syndrome: exercise as
            medicine?[J].BMC Sports Sci Med Rehabil.2018.10:7.
          </text>
          <text class="content-item">
            [3]闫红丹,王焕亮,唐梦熊,等.
            减重手术的心血管保护效应：减点体重，少些心痛[J].心血管病学进展.2018.39( 1):119-122.
          </text>
          <text class="content-item">
            [4]肥胖与四种常见慢性病的相关性分析 何向阳.刘峥..徐英.彭绩.赵仁成--预防医学 2020 年 7
            月第 32 卷第 7 期 Prev Med，Jul. 2020，Vol.32，No.7
          </text>
          <text class="content-item"> [5]《成人肥胖食养指南（2024年版）》 </text>
          <text class="content-item">
            [6]中国成人超重和肥胖症预防与控制指南--中国肥胖问题工作组 .营 养 学 报--第 26 卷第 1 期
            2004 年 2 月
          </text>
        </view>
      </view>
      <view v-if="state.type == 'blood_oxygen'">
        <view class="header">
          <img class="img" src="https://ainengli.hzjrsw.com/jkhx/knowledgeBg.png" alt="" />
          <view class="title">关于血氧</view>
          <view class="subtitle">了解健康知识，我的健康我做主</view>
        </view>
        <scroll-view :class="['scroll-X', state.scrollActive == true ? 'on' : '']" scroll-x="true">
          <view class="tabList">
            <view
              :class="['item', state.tabActive == index ? 'on' : '']"
              v-for="(item, index) in state.tabList"
              :key="index"
              @tap="tabFun(index)"
            >
              <text class="text">{{ item.name }}</text>
              <text class="text"></text>
            </view>
          </view>
        </scroll-view>
        <view class="content itemName itemName1">
          <view class="title">
            <text class="name">概述</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item">
            血氧饱和度（SaO2）是血液中被氧结合的氧合血红蛋白（HbO2）的容量占全部可结合的血红蛋白（Hb，hemoglobin）容量的百分比，即血液中血氧的浓度，它是呼吸循环的重要生理参数。
          </text>
        </view>
        <view class="content itemName itemName2">
          <view class="title">
            <text class="name">正常值范围</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item">
            1.测量方法不同，血氧饱和度的正常值是不同的，比如指尖血氧饱和度的正常值为95%~100%；动脉血氧饱和度正常值为95%~98%；混合静脉血氧饱和度的正常值为64%~88%。测量血氧饱和度最简单便捷的方法就是指尖血氧饱和度的测量，但当肢体末端的温度较凉等情况时易出现误差，甚至无法测量出结果。临床上使用最广泛的就是动脉血氧饱和度的测量，这种测量需要专业人士进行。
          </text>
          <text class="content-item"> {{ text_oxygen }} </text>
        </view>
        <view class="content itemName itemName3">
          <view class="title">
            <text class="name">相关疾病</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <view class="define"><text>·低氧血症</text></view>
          <text class="content-item">
            1.定义：低氧血症是指血液中含氧不足，动脉血氧分压（PaO2）低于同龄人的正常下限，主要表现为血氧分压与血氧饱和度下降。Pa02的正常值:80-100mmHg。各种原因如中枢神经系统疾患，各种心肺疾病、感染性疾病、中毒等都可以导致低氧血症的发生。
          </text>
          <text class="content-item"> 2.分度: </text>
          <text class="content-item"> 轻度:Pa02 60-80mmHg， </text>
          <text class="content-item"> 中度:Pa02 40-59mmHg， </text>
          <text class="content-item"> {{ text_oxygen2 }} </text>
          <text class="content-item"> {{ text_oxygen3 }} </text>
          <text class="content-item"> 3.常见症状 </text>
          <text class="content-item"> 缺氧程度不同，临床表现也不同。 </text>
          <text class="content-item"> 1.皮肤黏膜：可有不同程度的发绀。 </text>
          <text class="content-item">
            2.中枢神经系统：可由注意力障碍发展为烦躁不安、谵妄、表情淡漠及视物模糊、共济失调，乃至神志丧失。
          </text>
          <text class="content-item">
            3.心血管系统：可由心律失常发展为心室停搏、血压下降，乃至休克，长期慢性缺氧还可有右心室肥大及右心衰。
          </text>
          <text class="content-item">
            4.呼吸系统：可见深快呼吸，可因进一步缺氧发展为呼吸微弱，乃至呼吸停止。
          </text>
          <text class="content-item">
            5.血液系统：长期慢性缺氧，可导致继发性红细胞增多、血红蛋白增高、血液浓缩。
          </text>
          <text class="content-item">
            6.其他：严重的缺氧，可导致肝、肾细胞损伤，出现肝功能损伤、急性肾衰竭等，以及细胞内酸中毒和血钾升高。
          </text>
        </view>
        <view class="content itemName itemName4">
          <view class="title">
            <text class="name">就医指针</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item">
            低氧血症可能继发于多种疾病，是呼吸衰竭的重要临床表现，当患者出现憋气、烦躁、口唇发绀等情况时，应及时就医。
          </text>
          <text class="content-item"> 就诊科室：呼吸内科 </text>
        </view>
        <view class="content itemName itemName5">
          <view class="title">
            <text class="name">日常生活建议</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item"> 1.注意保暖，避免受凉而引起呼吸道感染。 </text>
          <text class="content-item">
            2.适当进行呼吸运动锻炼，在无不适的前提下，两上肢平伸，两手各提重物，上下进行活动，同时缩唇呼吸。
          </text>
          <text class="content-item"> 3.戒烟，防止肺功能进一步降低。 </text>
          <text class="content-item"> 4.慢性低氧血症者，应进行家中低流量吸氧。 </text>
          <text class="content-item">
            5.改善机体营养状况，摄入高蛋白及富含维生素的食物，多进食优质蛋白质、新鲜蔬菜及水果等，必要时可予肠外营养支持。
          </text>
        </view>
        <view class="content itemName itemName6">
          <view class="title">
            <text class="name">参考文献</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item">
            1、葛均波，徐永健，王辰，等. 内科学[M]. 9版. 北京：人民卫生出版社，2018.
          </text>
          <text class="content-item">
            2、陈荣昌，钟南山，刘又宁，等. 呼吸病学[M]. 3版. 北京：人民卫生出版社，2022.
          </text>
          <text class="content-item">
            3.王吉耀，葛均波，邹和建. 实用内科学：下册[M].16版.北京：人民卫生出版社，2022.
          </text>
        </view>
      </view>
      <view v-if="state.type == 'blood_pressure'">
        <view class="header headerName">
          <img class="img" src="https://ainengli.hzjrsw.com/jkhx/knowledgeBg.png" alt="" />
          <view class="title">关于血压</view>
          <view class="subtitle">了解健康知识，我的健康我做主</view>
        </view>
        <scroll-view :class="['scroll-X', state.scrollActive == true ? 'on' : '']" scroll-x="true">
          <view class="tabList">
            <view
              :class="['item', state.tabActive == index ? 'on' : '']"
              v-for="(item, index) in state.tabList"
              :key="index"
              @tap="tabFun(index)"
            >
              <text class="text">{{ item.name }}</text>
              <text class="text"></text>
            </view>
          </view>
        </scroll-view>
        <view class="content itemName itemName1">
          <view class="title">
            <text class="name">概述</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item">
            在不同血管内，血压被分别称为动脉血压、毛细血管压和静脉血压。一般所说的血压是指动脉血压。动脉血压是推动血液流动的驱动力，必须达到一定的高度，并且保持相对稳定，才能保证全身各器官有足够的血液供应，从而维持各器官的代谢和功能活动。临床上测量的血压是指体循环动脉血压，分为收缩压和舒张压。
          </text>
        </view>
        <view class="content itemName itemName2">
          <view class="title">
            <text class="name">正常范围</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item"> 正常血压：收缩压90-119mmHg和舒张压60-79mmHg。 </text>
          <text class="content-item"> 正常高值血压：收缩压120-139mmHg和/或舒张压80-89mmHg。 </text>
        </view>
        <view class="content itemName itemName3">
          <view class="title">
            <text class="name">血压异常</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item">
            （一）血压偏高：收缩压超过140mmHg和(或)舒张压超过90mmHg。
          </text>
          <view class="define"><text>·血压升高原因</text></view>
          <text class="content-item"> 1.非疾病因素：</text>
          <text class="content-item"> 年龄：随年龄的增长，收缩压和舒张压均有逐渐增高的趋势；</text>
          <text class="content-item">
            性别：更年期前，女性血压低于男性；更年期后，女性血压与男性血压差别较小。</text
          >
          <text class="content-item"> 昼夜和睡眠：血压表现为夜低昼高。</text>
          <text class="content-item">
            环境：寒冷环境，血压可略有升高；高温环境，血压可略下降。</text
          >
          <text class="content-item"> 体型：一般高大、肥胖者血压较高。</text>
          <text class="content-item"> 体位：一般立位血压高于坐位血压，坐位血压高于卧位血压。</text>
          <text class="content-item">
            身体不同部位：一般右上肢高于左上肢，下肢血压高于上肢20~40mmHg。</text
          >
          <text class="content-item">
            运动：在运动开始时血压有所升高，继而由于血流量重新分配和有效循环血量的改变，血压可逐渐恢复正常。</text
          >
          <text class="content-item">
            其他因素：激动、紧张、恐惧、兴奋等情绪，排泄、吸烟等活动都有可能使血压升高。</text
          >
          <text class="content-item">
            2.疾病因素：常见于高血压。在安静、清醒和未使用降压药的条件下采用标准测量方法，至少3次非同日血压值达到或超过收缩压140mmHg和（或）舒张压90mmHg，即可认为有高血压。大多数是原发性高血压，约5%继发于其他疾病，称为继发性高血压，如慢性肾炎、肾动脉狭窄、原发性醛固酮增多症、嗜铬细胞瘤、皮质醇增多症等。</text
          >
          <view class="define"><text>·就医指针</text></view>
          <text class="content-item"> 1.如果重复多次测量血压能够恢复正常，则不需要处理； </text>
          <text class="content-item">
            2.如果3次随机血压值均偏高，应心血管内科就诊进一步检查明确诊断。
          </text>
          <text class="content-item">
            3.体检发现血压异常，平时生活中时常有头晕、头痛等症状应及时心血管内科就诊。
          </text>
          <text class="content-item">
            4.发生意识障碍、晕厥等严重情况立即拨打120急救电话送往急诊科就诊。
          </text>
          <view class="define"><text>·日常生活建议</text></view>
          <text class="content-item">
            1.减少钠盐摄入：每人每日食盐摄入量不超过6g(1啤酒瓶盖），要注意隐性盐的摄入（咸菜、鸡精、酱油等）；
          </text>
          <text class="content-item">
            2.增加钾摄入：增加富钾食物（新鲜蔬菜、水果和豆类）的摄入量，肾功能良好者可选择低钠富钾替代盐。不建议服用钾补充剂（包括药物）来降低血压；
          </text>
          <text class="content-item">
            3.合理膳食：饮食以水果、蔬菜、低脂奶制品、富含食用纤维的全谷物、植物来源的蛋白质为主，减少饱和脂肪和反式脂肪酸摄入；
          </text>
          <text class="content-item">
            {{ textState3 }}
          </text>
          <text class="content-item"> 5.不吸烟：吸烟人群建议戒烟，同时避免被动吸烟； </text>
          <text class="content-item">
            6.限制饮酒：建议高血压患者不饮酒。如饮酒，应少量并选择低度酒，避免饮用高度烈性酒。每日酒精摄入量男性不超过25
            g，女性不超过15 g；每周酒精摄入量男性不超过140 g，女性不超过80
            g。白酒、葡萄酒、啤酒摄入量分别少于50、100、300 ml；
          </text>
          <text class="content-item">
            7.增加运动：每周4-7 d，每天累计30~60
            min的中等强度有氧运动（如步行、慢跑、骑自行车、游泳等），可适度安排阻抗和平衡运动；
          </text>
          <text class="content-item"> 8.心理平衡：减轻精神压力，保持心情愉悦； </text>
          <text class="content-item">
            9.管理睡眠：保持良好的睡眠，不要熬夜，保证每日6~8小时睡眠时间。
          </text>
          <text class="content-item">
            （二）血压偏低：收缩压低于90mmHg和(或)舒张压低于60mmHg。
          </text>
          <view class="define"><text>·血压偏低原因</text></view>
          <text class="content-item"> 1.非疾病因素 </text>
          <text class="content-item"> A 遗传：家族中有多人非疾病原因血压低于正常水平。 </text>
          <text class="content-item">
            B 体质或饮食：身材瘦弱、饮食量较小时，会出现低血压的情况，但没有导致血压降低的疾病。
          </text>
          <text class="content-item"> C 妊娠：女性妊娠期间血压可能会相对较低，分娩后会恢复。 </text>
          <text class="content-item">
            D 餐后低血压：进食2小时后会出现血压降低的情况，多见于老年人。
          </text>
          <text class="content-item">
            E 药物：扩张血管药、降低心肌收缩力的药、利尿剂等药物过量可以引起低血压。
          </text>
          <text class="content-item">
            F
            体位性低血压：如果平卧5分钟以上后站立1分钟和5分钟时测定血压，如果其收缩压下降20mmHg以上，并伴有头晕或晕厥。
          </text>
          <text class="content-item">
            G 其他：运动过量或天气炎热导致大量大汗，导致体内水分过度流失引起低血压。
          </text>
          <text class="content-item"> 2.疾病原因：血压偏低可由多种疾病引起。 </text>
          <text class="content-item">
            A 大量失血的疾病：外伤、消化性溃疡或肝硬化引起的消化道出血、异位妊娠（宫外孕等）。
          </text>
          <text class="content-item">
            B
            急性的持续（>30分钟）低血压状态多见于严重病症，如休克、心肌梗死、急性心脏压塞等。休克可由严重感染性疾病、过敏性疾病、严重疼痛、严重腹泻、严重呕吐等引起。
          </text>
          <text class="content-item">
            C 其他：内分泌疾病如甲状腺功能减退症、肾上腺皮质功能减退症等。
          </text>
          <view class="define"><text>·就医指针</text></view>
          <text class="content-item">
            A
            当发现血压低，排除一过性低血压，建议心血管内科就诊，排除是否因疾病因素导致的低血压，明确诊断，去除病因，及时治疗。
          </text>
          <text class="content-item">
            B 发生意识障碍、晕厥等严重情况立即拨打120急救电话送往急诊科就诊。
          </text>
          <view class="define"><text>·治疗</text></view>
          <text class="content-item"> 1.非疾病原因 </text>
          <text class="content-item">
            A
            生理性的低血压，如因饮食较少或体质引起的低血压，可通过改善饮食、适量运动等方式进行调理。
          </text>
          <text class="content-item">
            B 如因大量出汗引起低血压，在没有恶心、呕吐的情况下，可饮用饮料补充水分。
          </text>
          <text class="content-item">
            C 如因药物引起低血压，应及时就诊，按照医生要求调整药物。
          </text>
          <text class="content-item"> 2.疾病原因 </text>
          <text class="content-item">
            A 因外伤、消化道出血、输卵管妊娠破裂等引起的低血压，需要进行手术治疗。
          </text>
          <text class="content-item"> B 如果为严重出血引起的低血压，需要进行输血治疗。 </text>
          <text class="content-item">
            C 严重腹泻引起低血压，必要时需要注射葡萄糖溶液、生理盐水等补液。
          </text>
          <text class="content-item">
            D
            其他严重的病症，需要及时抢救，针对引发低血压的原因进行治疗。常见包括肾上腺素、去甲肾上腺素等升血压药物，地高辛、去乙酰毛花苷等改善心功能药物，H1抗组胺药（如苯海拉明、氯苯那敏等）、糖皮质激素等抗过敏药物等。
          </text>
          <view class="define"><text>·日常生活建议</text></view>
          <text class="content-item"> 1.饮食 </text>
          <text class="content-item"> A 提倡少食多餐、戒酒，餐后适当休息后再运动。 </text>
          <text class="content-item">
            B
            合理搭配饮食：保证摄入全面充足的营养物质，晕素搭配，增加蛋白质、糖类（碳水化合物）、脂类、铁、叶酸的摄入，如适当多吃鸡蛋、牛奶、瘦肉、鱼类、动物肝脏、动物血、柑橘类水果等。
          </text>
          <text class="content-item">
            C 合理饮水（成人保证每日1500～1700毫升），避免体内缺水。
          </text>
          <text class="content-item"> D 避免食用明确过敏的食物。 </text>
          <text class="content-item"> E 一般不建议限盐饮食。 </text>
          <text class="content-item"> 2.生活习惯 </text>
          <text class="content-item"> A 避免劳累和长时间站立。 </text>
          <text class="content-item"> B 避免熬夜，保证充分的睡眠时间。 </text>
          <text class="content-item"> C 避免突然坐起或站起，缓慢改变体位。 </text>
          <text class="content-item">
            D 坚持适量的体育锻炼运动，避免运动过度，避免在炎热或缺氧的环境下运动或站立太久。
          </text>
        </view>
        <view class="content itemName itemName4">
          <view class="title">
            <text class="name">参考文献</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item">
            [1]万学红，卢雪峰. 诊断学（第9版）[M]，北京: 人民卫生出版社，2018.
          </text>
          <text class="content-item">
            [2]朱大年. 生理学（第9版）[M]，北京: 人民卫生出版社，2018.
          </text>
          <text class="content-item">
            [3]葛均波，徐永健，王辰. 内科学（第9版）. 人民卫生出版社. 2018.
          </text>
          <text class="content-item"> [4]《中国高血压防治指南（2023年版）》 </text>
          <text class="content-item">
            [5]潘祥林，王鸿利. 实用诊断学（第2版）[M]，北京: 人民卫生出版社，2017.
          </text>
          <text class="content-item">
            [6]陈国伟，郑宗锷. 现代心脏内科学[M]. 湖南科学技术出版社. 2002.
          </text>
          <text class="content-item">
            [7]高润霖. 中华医学百科全书：心血管病学[M]，北京: 中国协和医科大学出版社，2017.
          </text>
          <text class="content-item">
            [8]刘德铭. 心血管疾病症状鉴别诊断学[M]，北京: 科学出版社，2009.
          </text>
          <text class="content-item">
            [9]胡品津，谢灿茂. 内科疾病鉴别诊断学[M]. 6版.北京：人民卫生出版社，2014.
          </text>
          <text class="content-item"> [10]国家基层高血压防治管理指南（2020版） </text>
        </view>
      </view>
      <view v-if="state.type == 'blood_sugar'">
        <view class="header headerName">
          <img class="img" src="https://ainengli.hzjrsw.com/jkhx/knowledgeBg.png" alt="" />
          <view class="title">关于血糖</view>
          <view class="subtitle">了解健康知识，我的健康我做主</view>
        </view>
        <scroll-view :class="['scroll-X', state.scrollActive == true ? 'on' : '']" scroll-x="true">
          <view class="tabList">
            <view
              :class="['item', state.tabActive == index ? 'on' : '']"
              v-for="(item, index) in state.tabList"
              :key="index"
              @tap="tabFun(index)"
            >
              <text class="text">{{ item.name }}</text>
              <text class="text"></text>
            </view>
          </view>
        </scroll-view>
        <view class="content itemName itemName1">
          <view class="title">
            <text class="name">概述</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item">
            血糖（Glu）指血中的葡萄糖浓度。葡萄糖是人体的重要组成成分，也是能量的重要来源，血糖必须保持一定的水平才能维持体内各器官和组织的正常运作。正常人血糖的产生和利用处于动态平衡的状态，维持在一个相对稳定的水平，但在某些疾病或因素的影响下，血糖会出现波动。
          </text>
        </view>
        <view class="content itemName itemName2">
          <view class="title">
            <text class="name">正常值参考范围</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item"> 空腹血糖4.4-6.1mmol/L </text>
          <text class="content-item"> 餐后1小时血糖6.7-9.4mmol/L </text>
          <text class="content-item"> 餐后2小时血糖≤7.8mmol/L </text>
          <text class="content-item"> 孕妇 </text>
          <text class="content-item"> 空腹血糖 3.1-5.1mmol/L </text>
          <text class="content-item"> 餐后1小时血糖≤10.0mmol/L </text>
          <text class="content-item"> 餐后2小时血糖≤8.5mmol/L </text>
        </view>
        <view class="content itemName itemName3">
          <view class="title">
            <text class="name">指标异常</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <view class="define"><text>·指标偏高</text></view>
          <text class="content-item">
            短期的轻度血糖升高可能与运动、用药、脱水、饮食等因素有关，但持续的血糖升高，一般提示患者糖代谢能力减弱，存在空腹血糖受损、糖耐量减低、糖尿病等情况。
          </text>
          <text class="content-item">
            1.生理性增高：饭后1～2小时，注射葡萄糖后，剧烈运动，情绪过度紧张时肾上腺素分泌增加，会使得血糖暂时性增高。
          </text>
          <text class="content-item">
            2.病理性增高：各种糖尿病、慢性胰腺炎、心肌梗死、甲状腺功能亢进、肾上腺功能亢进、颅内压增高等。
          </text>
          <text class="content-item">
            3.药物性增高：糖皮质激素（如强的松等）、噻嗪类利尿剂、口服避孕药、注射肾上腺素等药物可引起血糖偏高。
          </text>
          <view class="define"><text>·指标偏低</text></view>
          <text class="content-item">
            正常人群一过性的血糖偏低可能提示患者糖摄入不足或者消耗、转化过多，需结合症状综合判断属于哪种情况，但反复发作的血糖偏低可能提示患者的糖代谢、摄入出现异常，可能与胰岛素分泌过多等疾病因素，降糖药或胰岛素过量、进食减少等外源性因素有关。
          </text>
          <text class="content-item"> 1.生理性降低：常见于饥饿、剧烈运动、妊娠、哺乳后。 </text>
          <text class="content-item">
            2.病理性降低：常见于胰岛细胞瘤、糖代谢异常、严重肝病、垂体功能减退、肾上腺功能减退、甲状腺功能减退、长期营养不良等。
          </text>
          <text class="content-item">
            3.药物性降低：使用降糖药、胰岛素不当可导致血糖下降过度，引起低血糖。此外，一些非降糖药如磺胺类药物、吲哚美辛等药物也可引起低血糖。
          </text>
          <text class="content-item">
            4.功能性降低：进食后胰岛β细胞分泌过多的胰岛素导致血糖偏低，如反应性低血糖等，较为少见。
          </text>
        </view>
        <view class="content itemName itemName4">
          <view class="title">
            <text class="name">日常生活建议</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <view class="define"><text>·血糖偏高</text></view>
          <text class="content-item">
            1.饮食：控制主食摄入，控制大米、面粉等主食的摄入，增加绿豆等杂粮的摄入；增加新鲜蔬菜的摄入，每日摄入量最好在500g左右，其中深色蔬菜应当在一半以上；增加食物的丰富程度，可增加豆制品、坚果、酸奶等食物的摄入。不宜喝含糖饮料，减少油脂摄入，限制盐、酱油的用量，避免食用烟熏、烘烤等加工肉类产品。
          </text>
          <text class="content-item">
            2.运动：通过运动控制体重，一般建议年轻糖尿病患者BMI＜24Kg/m2，老年糖尿病患者BMI＜28Kg/m2。应当避免运动过于激烈、身体条件适宜者可在医生的指导下每周进行150min的中等强度运动，但血糖过高、血糖极度不稳、血压过高等身体条件不适宜的患者不宜运动。
          </text>
          <text class="content-item"> 3.戒烟戒酒 </text>
          <view class="define"><text>·血糖偏低</text></view>
          <text class="content-item"> 1.饮食 </text>
          <text class="content-item">
            发现血糖偏低后，饮食上需要注意规律进食三餐，随身携带一些高糖食物如奶糖、巧克力、蜂蜜、饼干等以便在出现血糖降低后及时补充。
          </text>
          <text class="content-item"> 2.运动 </text>
          <text class="content-item">
            除饮食外，日常生活中还可注意避免空腹运动，运动也不宜过于激烈，尤其应当避免跑步、爬楼梯等剧烈运动。
          </text>
        </view>
        <view class="content itemName itemName5">
          <view class="title">
            <text class="name">参考文献</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item">
            [1]王吉耀，葛均波，邹和建. 实用内科学：下册[M].16版.北京：人民卫生出版社，2022.
          </text>
          <text class="content-item"> [2] 中国2型糖尿病防治指南（2020版） </text>
          <text class="content-item"> [3] 中国老年2型糖尿病防治临床指南（2022年版） </text>
          <text class="content-item"> [4]隽娟, 杨慧霞. </text>
          <text class="content-item">
            美国糖尿病学会2023年“妊娠合并糖尿病诊治指南”解读[J].中华围产医学杂志,2023,26(4):265-269.
          </text>
          <text class="content-item"> DOI: 10.3760/cma.j.cn113903-20230220-00077. </text>
          <text class="content-item">
            [5]侯志慧.血糖的检测与血糖升高的原因[J].医药与保健,2016,024(010):192-193.
          </text>
        </view>
      </view>
      <view v-if="state.type == 'heart'">
        <view class="header headerName">
          <img class="img" src="https://ainengli.hzjrsw.com/jkhx/knowledgeBg.png" alt="" />
          <view class="title">关于心率</view>
          <view class="subtitle">了解健康知识，我的健康我做主</view>
        </view>
        <scroll-view :class="['scroll-X', state.scrollActive == true ? 'on' : '']" scroll-x="true">
          <view class="tabList">
            <view
              :class="['item', state.tabActive == index ? 'on' : '']"
              v-for="(item, index) in state.tabList"
              :key="index"
              @tap="tabFun(index)"
            >
              <text class="text">{{ item.name }}</text>
              <text class="text"></text>
            </view>
          </view>
        </scroll-view>
        <view class="content itemName itemName1">
          <view class="title">
            <text class="name">概述</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item">
            心率是指每分钟心脏搏动次数，正常人安静、清醒状态下心率（安静心率），一般为60～100次/分，可因年龄、性别或其他生理因素产生个体差异。一般来说，新生儿心率较快，随着年龄增长，心率逐渐减慢，至青春期接近成年人水平，老年人心率比年轻人慢，女性的心率比同龄男性快，运动员的心率较普通成人偏慢，这些都是正常的生理现象。超过100次/分称心动过速，低于60次/分称为心动过缓。
          </text>
        </view>
        <view class="content itemName itemName2">
          <view class="title">
            <text class="name">指标异常</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <view class="define"><text>·心率偏快</text></view>
          <text class="content-item"> 1.疾病因素 </text>
          <text class="content-item">
            心脏疾病：心力衰竭、心肌炎、风湿性心脏病、扩张型心肌病、阵发性心动过度、阵发性室上性心动过度等。
          </text>
          <text class="content-item">
            其他：各种原因导致的贫血、甲状腺功能亢进、肾上腺肿瘤、休克、发热等。
          </text>
          <text class="content-item"> 2.非疾病因素 </text>
          <text class="content-item">
            在饮酒、饮咖啡和浓茶，服用药物（如阿托品、肾上腺素、麻黄碱等）、妊娠、体位变化、运动或情绪激动时都会出现心率加快的情况。另外，心率受体温影响，体温每升高1℃，心率每分钟可增加12~18次。
          </text>
          <view class="define"><text>·心率偏慢</text></view>
          <text class="content-item"> 1.疾病因素 </text>
          <text class="content-item">
            心脏疾病：房室传导阻滞、急性下壁心肌梗死、病态窦房结综合征等。
          </text>
          <text class="content-item"> 甲状腺疾病：甲状腺功能减退、慢性淋巴细胞性甲状腺炎等。 </text>
          <text class="content-item">
            其他：包括可引起颅内压增高的病症如脑膜炎、颅内肿瘤，以及精神抑郁症、血管神经性晕厥、动脉粥样硬化、阻塞性黄疸等。
          </text>
          <text class="content-item"> 2.非疾病因素 </text>
          <text class="content-item">
            特殊人群：经常进行体力劳动或体育运动的人群，也可见于部分老年人。
          </text>
          <text class="content-item">
            静息状态：同一个体，在安静状态下和睡眠时，可能会出现心率较慢的情况。
          </text>
          <text class="content-item">
            药物：应用胺碘酮、β-受体阻滞剂、奎尼丁、维拉帕米、新斯的明或洋地黄类药物等。
          </text>
          <text class="content-item">
            其他：按压颈动脉窦、呕吐、眼科手术和冠状动脉造影后均可出现心率减慢的情况。
          </text>
        </view>
        <view class="content itemName itemName3">
          <view class="title">
            <text class="name">日常生活建议</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <view class="define"><text>·饮食原则</text></view>
          <text class="content-item">
            1.对于心率增快的患者，除积极治疗原发疾病外，要注意合理饮食。如心脏疾病患者，应低盐、低脂、低胆固醇饮食，保证新鲜蔬菜、水果供给，同时需注意饮食搭配。血液疾病患者，应注意避免喝浓茶及进食生冷性凉的食物，增加含铁丰富的食物的摄入。此外注意饮食卫生，避免暴饮暴食。
          </text>
          <text class="content-item">
            2.对于心率偏低的患者，除积极治疗原发疾病外，需配合饮食调理。如心脏疾病的患者，应低钠、低脂、低胆固醇饮食，少食多餐，进食易消化的食物。内分泌疾病的患者应保证碘摄入在正常范围内，同时补充优质蛋白。
          </text>
          <view class="define"><text>·生活习惯</text></view>
          <text class="content-item"> 心率偏快： </text>
          <text class="content-item">
            1.原发病为心脏疾病的患者，应戒烟戒酒、注意休息，养成健康的生活习惯，不可熬夜和剧烈运动，遵医嘱按时按量服药，定期门诊随访。
          </text>
          <text class="content-item">
            2.原发疾病为血液疾病的患者，病情较轻时可进行适当活动，病情较重时应卧床休息。
          </text>
          <text class="content-item">
            3.原发病为内分泌疾病的患者要注意劳逸结合，遵医嘱用药，进行适当的活动锻炼，定期门诊随访。
          </text>
          <text class="content-item"> 心率偏慢： </text>
          <text class="content-item">
            1.原发病为心脏疾病的患者应戒烟戒酒，注意休息，不可熬夜，维持健康的生活习惯，保持情绪稳定。
          </text>
          <text class="content-item">
            2.原发疾病为甲状腺疾病的患者平时应适当锻炼，达到运动与静养平衡，同时遵医嘱服药。
          </text>
        </view>
        <view class="content itemName itemName4">
          <view class="title">
            <text class="name">参考文献</text>
            <img class="img" src="@/static/image/hmm/27.png" alt="" />
          </view>
          <text class="content-item"> [1]王庭槐.生理学 第9版[M.北京:人民卫生出版社,2018:93. </text>
          <text class="content-item">
            [2]万学红,卢雪峰.诊断学 第9版[M].北京:人民卫生出版社,2018:149.
          </text>
          <text class="content-item">
            [3]王建枝,钱睿哲.病理生理学 第9版[M].北京:人民卫生出版社,2018:195.
          </text>
          <text class="content-item">
            [4]赵新华.心内科疾病诊治精要[M].开封:河南大学出版社.2020:150.
          </text>
          <text class="content-item">
            [5]田文,刘飞德,殷德涛,等.甲状腺疾病就医指南[M].科学技术文献出版社,2016:50
          </text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import { onLoad, onUnload, onShow } from '@dcloudio/uni-app'
const state = reactive({
  tabList: [{ name: '概述' }, { name: '原理机制' }, { name: '异常表现' }, { name: '生活建议' }],
  scrollActive: false,
  tabActive: 0,
  title: '',
  type: '',
  scrollTop: 0
})

const text_oxygen = ref(
  `2.血氧饱和度可以在一定程度上反映机体的缺血缺氧状况，在疾病的治疗，尤其是重症患者的治疗当中是十分重要的。一般人SaO2正常应不低于94%，在94%以下为供氧不足，一般将SaO2<90%定为低氧血症的标准。`
)
const text_oxygen2 = ref(`重度:Pa02<40mmHg，`)
const text_oxygen3 = ref(`Pa02<60mmHg,即呼吸衰竭`)
const textState3 = ref(
  `4.控制体重：推荐将体重维持在健康范围（BMI=18.5-23.9 kg/m2，男性腰围<90 cm，女性<85cm）。控制体重方法包括控制能量摄入、增加体力活动和行为干预。提倡规律的中等强度有氧运动，减少久坐时间；`
)
const distanceArr = ref([])
onLoad((option) => {
  state.type = option.type ? option.type : ''
  switch (state.type) {
    case 'BMI': {
      uni.setNavigationBarTitle({
        title: '了解BMI'
      })
      break
    }
    case 'whr': {
      uni.setNavigationBarTitle({
        title: '了解腰臀比'
      })
      break
    }
    case 'blood_pressure': {
      uni.setNavigationBarTitle({
        title: '了解血压'
      })
      state.tabList = [
        { name: '概述' },
        { name: '正常范围' },
        { name: '血压异常' },
        { name: '参考文献' }
      ]
      break
    }
    case 'heart': {
      uni.setNavigationBarTitle({
        title: '了解心率'
      })
      state.tabList = [
        { name: '概述' },
        { name: '指标异常' },
        { name: '日常生活建议' },
        { name: '参考文献' }
      ]
      break
    }
    case 'blood_sugar': {
      uni.setNavigationBarTitle({
        title: '了解血糖'
      })
      state.tabList = [
        { name: '概述' },
        { name: '正常值参考范围' },
        { name: '指标异常' },
        { name: '日常生活建议' },
        { name: '参考文献' }
      ]
      break
    }
    case 'blood_oxygen': {
      uni.setNavigationBarTitle({
        title: '了解血氧'
      })
      state.tabList = [
        { name: '概述' },
        { name: '正常值' },
        { name: '相关疾病' },
        { name: '就医指针' },
        { name: '日常生活建议' },
        { name: '参考文献' }
      ]
      break
    }
  }
})

onShow(() => {
  if (
    state.type == 'blood_pressure' ||
    state.type == 'heart' ||
    state.type == 'blood_sugar' ||
    state.type == 'blood_oxygen'
  ) {
    nextTick(() => {
      getDistanceArr()
    })
  }
})

// 获取所有元素在当前页面所处的位置信息
const getDistanceArr = () => {
  uni
    .createSelectorQuery()
    .select('.itemName1')
    .boundingClientRect((res) => {
      distanceArr.value.push(res.top)
    })
    .exec()

  uni
    .createSelectorQuery()
    .select('.itemName2')
    .boundingClientRect((res) => {
      distanceArr.value.push(res.top)
    })
    .exec()
  uni
    .createSelectorQuery()
    .select('.itemName3')
    .boundingClientRect((res) => {
      distanceArr.value.push(res.top)
    })
    .exec()
  uni
    .createSelectorQuery()
    .select('.itemName4')
    .boundingClientRect((res) => {
      distanceArr.value.push(res.top)
    })
    .exec()
  if (state.type == 'blood_sugar') {
    uni
      .createSelectorQuery()
      .select('.itemName5')
      .boundingClientRect((res) => {
        distanceArr.value.push(res.top)
      })
      .exec()
  }
  if (state.type == 'blood_oxygen') {
    uni
      .createSelectorQuery()
      .select('.itemName5')
      .boundingClientRect((res) => {
        distanceArr.value.push(res.top)
      })
      .exec()
    uni
      .createSelectorQuery()
      .select('.itemName6')
      .boundingClientRect((res) => {
        distanceArr.value.push(res.top)
      })
      .exec()
  }
}

const tabFun = (index) => {
  // 方法一 简单一点直接跳转到id对应的位置
  nextTick(() => {
    if (index == 0) {
      state.scrollTop = 0
      state.tabActive = 0
    } else {
      state.tabActive = index
      if (uni.getSystemInfoSync().uniPlatform == 'mp-weixin') {
        state.scrollTop = distanceArr.value[index] - 120
      } else {
        state.scrollTop = distanceArr.value[index] - 80
      }
    }
    const timer = setTimeout(() => {
      clearTimeout(timer)
    }, 500) // 解决ios和安卓、鸿蒙系统兼容性问题
  })
}
const scroll = (e) => {
  let skewY = 170 // 偏移量，由于吸顶的tab、头部的显示信息也有高度，素以做了偏移量
  if (e.detail.scrollTop >= skewY) {
    if (!state.scrollActive && state.tabActive <= 0) {
      // 在未显示tab并且 currentTab <= 0时，防止uview ui抖动bug，设置默认复位值
      state.tabActive = 0
    }
    state.scrollActive = true

    nextTick(() => {
      const length = distanceArr.value.length
      const index = distanceArr.value.findIndex((el) => el - skewY - e.detail.scrollTop > 0)
      // 当index  == -1 的时候，实际当前滚动的距离超出了最大值，也就是在最后一个tab显示的内容
      // 当index > 0 的时候，说明能在当前的scrollTop值找到，即index的前一位
      if (e.detail.scrollTop + 600 > distanceArr.value[length - 1]) {
        return
      } else {
        state.tabActive = index > 0 ? index - 1 : length - 1
      }
    })
  } else {
    state.scrollActive = false
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  .header {
    display: inline-block;
    width: calc(100% - 64rpx);
    margin: 32rpx 32rpx 0;
    height: 180rpx;
    position: relative;
    .img {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
    }
    .title {
      position: relative;
      z-index: 1;
      font-size: 40rpx;
      color: #fff;
      font-weight: 700;
      margin: 30rpx 40rpx 20rpx;
    }
    .subtitle {
      position: relative;
      z-index: 1;
      font-size: 28rpx;
      color: #fff;
      margin: 0 40rpx;
    }
  }
  .scroll-Y {
    height: 100vh;
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }
  .scroll-X {
    margin: 30rpx 32rpx 0;
    width: calc(100% - 64rpx);
    overflow-x: scroll;
    background: #f3f7f8;
    &.on {
      margin: 0;
      display: block;
      position: fixed;
      z-index: 9999;
      width: 100%;
      top: 0;
      left: 0;
      .tabList {
        padding: 0 16rpx;
      }
    }
    .tabList {
      white-space: nowrap;
      .item {
        display: inline-block;
        vertical-align: middle;
        padding: 0 30rpx;
        text-align: center;
        font-size: 28rpx;
        color: #222;
        position: relative;
        height: 64rpx;
        line-height: 64rpx;
        background: #fff;
        margin-right: 32rpx;
        border-radius: 32rpx;
        &:nth-last-child(1) {
          margin-right: 0;
        }
        &.on {
          color: #fff;
          font-weight: 700;
          background: #00d1b6;
        }
      }
    }
  }
  .content {
    margin: 30rpx 32rpx 0;
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    .title {
      position: relative;
      margin-bottom: 20rpx;
      .name {
        font-size: 34rpx;
        color: #222;
        font-weight: 700;
        position: relative;
        z-index: 1;
      }
      .img {
        display: block;
        width: 40rpx;
        height: 12rpx;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
    .content-item {
      margin-top: 20rpx;
      font-size: 30rpx;
      color: #222;
      line-height: 1.5;
      text-align: justify;
      display: block;
    }
    .define {
      font-size: 16px;
      font-weight: 700;
      margin: 20px 0 10px;
      padding: 10px 0 10px 10px;
      background: linear-gradient(90deg, rgba(2, 188, 195, 0.05) 0%, rgba(2, 188, 195, 0) 100%);
      border-radius: 4px;
    }
  }
}
</style>
